import * as React from "react";
import { Button, Input, Modal } from "antd";
import DayRangePicker from "../../../../../../compontents/DayRangePicker";
import moment, { Moment } from "moment";
import "./index.less";

export interface SearchProps {
  onSubmit: (data: SearchState) => any;
}

export interface SearchState {
  startDate: Moment | null;
  endDate: Moment | null;
  likeStr: string;
}

class Search extends React.Component<SearchProps, SearchState> {
  state = {
    startDate: moment().add(-3, "day"),
    endDate: moment(),
    likeStr: "",
  };
  render() {
    let { startDate, endDate, likeStr } = this.state;
    return (
      <div className="Search rowcon_body">
        <span style={{ paddingLeft: 26 }}>报警时段：</span>
        <DayRangePicker
          day={30}
          value={[startDate, endDate]}
          onChange={(data: Moment | null[]) => {
            this.setState({ startDate: data[0], endDate: data[1] });
          }}
        />
        <span style={{ paddingLeft: 26 }}>告警内容：</span>
        <div className="d_inlineFlex">
          <Input
            value={likeStr}
            onChange={(e: any) => {
              this.setState({ likeStr: e.target.value });
            }}
          />
        </div>
        <div className="d_inlineFlex" style={{ paddingLeft: 16 }}>
          <Button
            onClick={() => {
              this.onclear();
            }}
          >
            重置
          </Button>
        </div>
        <div className="d_inlineFlex" style={{ paddingLeft: 16 }}>
          <Button
            type="primary"
            onClick={() => {
              this.submit();
            }}
          >
            查询
          </Button>
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.submit();
  }
  onclear() {
    this.setState({
      startDate: null,
      endDate: null,
      likeStr: "",
    });
  }
  submit() {
    let { startDate, endDate } = this.state;
    if (startDate === null || endDate === null) {
      Modal.error({
        title: "开始结束时间不能为空",
      });
    } else {
      this.props.onSubmit(this.state);
    }
  }
}

export default Search;
